<template>
  <div class="container-card">
    <div class="header">{{title}}</div>
    <div class="content">
      <div class="book-row" v-for="(item, index) in bookData" :key="index">
        <div class="book-col" :style="{ flex: '0 0 ' + (100/ncols) + '%'}" v-for="(book, bookIndex) in item"
             :key="bookIndex">
          <div class="book-wrapper" :style="{ flexDirection: mode === 'col' ? 'column' : 'row' }"
               @click="onBookClick" v-if="mode === 'col' || mode === 'row'">
            <image-card :src="book.cover"></image-card>
            <div class="title-wrapper title-col" v-if="mode === 'col'">
              <div class="book-title">{{book.title}}</div>
            </div>
            <div class="title-wrapper title-row" v-else>
              <div class="book-title">{{book.title}}</div>
              <div class="book-title book-author"><span v-for="(author, aindx) in book.author" :key="aindx">{{author.name}}·</span></div>
              <div class="book-title book-author">{{book.publisher.name}}</div>
              <div class="book-title book-author">{{book.category.name}}</div>
            </div>
          </div>
          <div class="category-wrapper" v-else>
          <div class="category-text">{{book.name}}</div>
          <div class="category-num">{{book.book_num}}本书</div>
          <div class="category-img-wrapper">
            <div class="category-img1">
              <image-card :src="book.cover1"></image-card>
            </div>
            <div class="category-img2">
              <image-card :src="book.cover2"></image-card>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="footer" v-if="showButton" @click="onMoreClick">
      <van-button round custom-class="book-btn">{{btnText}}</van-button>
    </div>
  </div>
</template>

<script>
  import ImageCard from './ImageCard'

  export default {
    name: 'ContainerCard',
    components: {ImageCard},
    props: {
      title: {type: String, default: ''},
      data: {type: Array, default: []},
      btnText: {type: String, default: ''},
      nrows: {type: Number, default: 0},
      ncols: {type: Number, default: 1},
      mode: {type: String, default: 'row'},
      showTitle: {type: Boolean, default: true},
      showButton: {type: Boolean, default: true},
      linearBg: {type: Boolean, default: false}
    },
    computed: {
      bookData () {
        const {data, nrows, ncols} = this
        if (data && data.length > 0) {
          const number = nrows * ncols
          const _bookData = data.slice(0, number)
          const _bookDataRow = []
          let _row = 0
          while (_row < nrows) {
            _bookDataRow.push(_bookData.slice(_row * ncols, (_row + 1) * ncols))
            _row++
          }
          return _bookDataRow
        } else {
          return []
        }
      }
    },
    methods: {
      onBookClick () {
      },
      onMoreClick () {
        this.$emit('onMoreClick')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-card {
    .header {
      padding: 13px 0 0 20.5px;
    }

    .content {
      padding: 0 12px;
      margin-top: 10.5px;

      .book-row {
        display: flex;
        flex-flow: row nowrap;
        margin-top: 12px;

        .book-col {
          padding: 0 8px;
          box-sizing: border-box;

          .book-wrapper {
            display: flex;

            .title-wrapper {
              &.title-col {
                .book-title {
                  font-size: 12px;
                  color: #212731;
                  line-height: 16.5px;
                  max-height: 33px;
                  font-weight: 500;
                  overflow: hidden;
                  word-break: break-word;
                }
              }

              &.title-row {
                flex: 0 0 50%;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .book-title {
                  font-size: 14px;
                  color: #1F1F1F;
                  line-height: 18px;
                  max-height: 36px;
                  overflow: hidden;
                  word-break: break-word;
                }

                .book-author {
                  font-size: 12px;
                  color: #868686;
                  line-height: 14px;
                  max-height: 14px;
                }
              }
            }
          }

          .category-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #F8F9FB;
            border-radius: 10px;
            height: 96px;
            padding: 13px 0 14.5px 16px;
            box-sizing: border-box;

            .category-text {
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #212832;
              font-size: 16px;
              line-height: 22.5px;
            }

            .category-num {
              color: #868686;
              font-size: 12px;
              line-height: 16.5px;
            }

            .category-img-wrapper {
              position: absolute;
              right: 0;
              bottom: 0;

              .category-img1 {
                position: absolute;
                right: 0;
                bottom: -5px;
                z-index: 100;
                width: 48px;
                border-radius: 0 0 10px 0;
              }

              .category-img2 {
                position: absolute;
                right: 30px;
                bottom: -5px;
                z-index: 90;
                width: 36px;
              }
            }
          }
        }
      }
    }

    .footer {
      padding: 12px 20px 20px;
    }
  }
</style>

<style lang="scss">
  .category-img1 {
    .image {
      border-radius: 0 0 10px 0;
    }
  }

  .footer {
    .book-btn {
      width: 100%;
      font-size: 14px;
      color: #3696EF;
      border: 1px solid #EDEEEE;
    }
  }
</style>
